var storage = window.localStorage
var Name = document.getElementById('name')
var gender = document.getElementById('gender')
var telephone = document.getElementById('telephone')
var email = document.getElementById('email')
var address = document.getElementById('address')
var postcode = document.getElementById('postcode')
var country = document.getElementById('country')
var city = document.getElementById('city')
var account = document.getElementById('account')
var password = document.getElementById('password')
var words = document.getElementById('words')
var back = document.getElementById('back');//返回主页
var input = document.getElementsByTagName('input')//遍历用
var button = document.getElementsByClassName('button')//遍历用
var edit = document.getElementById('edit')//编辑
var cancel = document.getElementById('cancel')//取消
var logout = document.getElementById('logout')//注销
var layer = layui.layer
var img = document.getElementsByTagName('img')[0]
var username;
var code;
if (window.location.search != '') {
    username = JSON.parse(decodeURI(window.location.search).substring(1)).username
    code = JSON.parse(decodeURI(window.location.search).substring(1)).code
}
else location.href = 'index.html'

var temp = JSON.parse(storage.getItem(username))

//返回入口
back.onclick = function () {
    location.href = 'index.html?' + JSON.stringify({ code: code, username: username })//入口跳转
}

//初始化
for (var i = 0; i < input.length; i++) {
    input[i].setAttribute('disabled', true)
}
for (var i = 0; i < button.length; i++) {
    button[i].style.display = 'none'
}
account.innerHTML = username
password.value = JSON.parse(storage.getItem(username)).password
cancel.style.display = 'none'
Name.value = temp.name
gender.value = temp.gender
telephone.value = temp.telephone
email.value = temp.email
address.value = temp.address
postcode.value = temp.postcode
country.value = temp.country
city.value = temp.city
words.value = temp.words
img.setAttribute('src',temp.imgurl)

//点击编辑
edit.onclick = function () {
    for (var i = 0; i < input.length; i++) {
        input[i].removeAttribute('disabled')
        input[i].style.color = 'black'
    }
    for (var i = 0; i < button.length; i++) {
        button[i].style.display = 'inline-block'
    }
    edit.style.display = 'none'
    cancel.style.display = 'block'
}

//点击取消
cancel.onclick = function () {
    for (var i = 0; i < input.length; i++) {
        input[i].setAttribute('disabled', true)
    }
    for (var i = 0; i < button.length; i++) {
        button[i].style.display = 'none'
    }
    cancel.style.display = 'none'
    edit.style.display = 'block'
}


//点击保存
for (var i = 0; i < button.length; i++) {
    button[i].onclick = function () {
        if (this.name == 0) {
            temp.name = Name.value
            temp.gender = gender.value
            storage.setItem(username, JSON.stringify(temp))
            Name.setAttribute('disabled', true)
            gender.setAttribute('disabled', true)
        } else if (this.name == 1) {
            temp.telephone = telephone.value
            temp.email = email.value
            storage.setItem(username, JSON.stringify(temp))
            telephone.setAttribute('disabled', true)
            email.setAttribute('disabled', true)
        } else if (this.name == 2) {
            temp.address = address.value
            temp.postcode = postcode.value
            storage.setItem(username, JSON.stringify(temp))
            address.setAttribute('disabled', true)
            postcode.setAttribute('disabled', true)
        } else if (this.name == 3) {
            temp.country = country.value
            temp.city = city.value
            storage.setItem(username, JSON.stringify(temp))
            country.setAttribute('disabled', true)
            city.setAttribute('disabled', true)
        } else if (this.name == 4) {
            temp.password = password.value
            storage.setItem(username, JSON.stringify(temp))
            password.setAttribute('disabled', true)
        }else if (this.name == 5) {
            temp.words = words.value
            storage.setItem(username, JSON.stringify(temp))
            words.setAttribute('disabled', true)
        }
        this.style.display = 'none'

        if (checkbut() == false) {
            cancel.style.display = 'none'
            edit.style.display = 'block'
        }
    }
}
//检查保存按钮数量
function checkbut() {
    for (var i = 0; i < button.length; i++) {
        if (button[i].style.display == 'inline-block') return true
    }
    return false
}

//点击注销
logout.onclick = function () {
    layer.confirm('请确认是否注销该用户', { icon: 3, title: '提示' }, function () {
        storage.removeItem(username)
        location.href = 'index.html'
        layer.close
    })

}

//echart
var percent = temp.percent
var lan = temp.lan

function circle(percent, lan) {
    this.value = percent
    this.name = lan
}

var circledata = new Array()

for (var i = 0; i < percent.length; i++) {
    circledata.push(new circle(percent[i], lan[i]))
}

window.addEventListener("resize", function () {
    mychat.resiae();
})

var mychat = echarts.init(document.getElementById('chat'));
var mychat1 = echarts.init(document.getElementById('chat1'));
var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center',
        textStyle:{
            fontSize: 12,//字体大小
            color: '#ffffff'//字体颜色
        },

    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data:
                // [
                //     { value: 1048, name: 'Search Engine' },
                //     { value: 735, name: 'Direct' },
                //     { value: 580, name: 'Email' },
                //     { value: 484, name: 'Union Ads' },
                //     { value: 300, name: 'Video Ads' }
                // ]
                circledata
        }
    ]
};
var option1 = {
    xAxis: {
        type: 'category',
        data: temp.lan,
        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffffff'
            }
        }

       
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffffff'
            }
        }

    },
    series: [
        {
            data: temp.percent,
            type: 'bar'
        }
    ]
};
mychat1.setOption(option1);
mychat.setOption(option);

//个性签名
fetch('https://v1.hitokoto.cn')
    .then(function (res) {
        return res.json();
    })
    .then(function (data) {
        var hitokoto = document.getElementById('hitokoto');
        hitokoto.innerText = data.hitokoto;
    })
    .catch(function (err) {
        console.error(err);
    })


//头像上传
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  var element = layui.element;
  var $ = layui.$;
  // 单图片上传
  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
        temp.imgurl = result
        console.log(temp)
        storage.setItem(username,JSON.stringify(temp))
      });
      
      element.progress('filter-demo', '0%'); // 进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function(res){
      // 若上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      // 上传成功的一些操作
      // …
      $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
    },
    error: function(){
      // 演示失败状态，并实现重传
      var demoText = $('#ID-upload-demo-text');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    },
    // 进度条
    progress: function(n, elem, e){
      element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
});
